Para los que gusten de vestir su blog con algún tema especial aquí unos sitios para visitar.
Febrero es el segundo mes del año y para muchos tiene un día especial "San Valentín" que se celebra el día 14, en algunos países se llama "Día de los Enamorados" y en otros "Día del Amor y la Amistad"
Para los que gusten de vestir su blog con algún tema especial aquí unos sitios para visitar.
Para los que gusten de vestir su blog con algún tema especial aquí unos sitios para visitar.
20
opiniones
Sobre cursores |
|
| ▼ |
Continuamente vemos cursores pero no le prestamos atención quizás porque estamos familiarizados y se ha convertido en algo rutinario, el más conocido es "pointer" esa manito informando que nos encontramos ante un enlace.
En nuestro blog podemos observar dos tipos de cursores "pointer" para los enlaces y "move" en la plantilla de diseño para arrastrar las etiquetas de los gadgets, podemos cambiar el tipo de cursor a nuestro antojo incluso añadir alguno creado por nosotros pero antes debemos saber donde incluirlo.
En las hojas de estilo de nuestra plantilla ubicamos body allí se encuentran los estilos del cuerpo de la plantilla, color de fondo, texto, tipo de letra, tamaño, alineación...
Un poco más abajo tenemos los estilos de los enlaces.
a:link es el enlace tal y como lo vemos.
a:visited los enlaces visitados.
a:hover es el efecto de los enlaces al pasar el puntero.
Si deseamos cambiar el puntero de los enlaces tendríamos que añadir "cursor:tipo de cursor"
a:hover {
color:#940f04;
cursor:move;
}
"Este texto es un ejemplo de cursor move"
¿Podemos personalizarlo?
cursor:url('url-imagen')
(Donde url-imagen debemos añadir la url de nuestra imagen)
"Este texto es un ejemplo de cursor con imagen"
El tema navegadores nos lo pone complicado, hasta donde yo sé el único formato compatible con Firefox y Explorer es el formato .cur
Aquí unas referencias extraídas de Vagabundia
Internet Explores soporta CUR o ANI.
Firefox soporta imágenes PNG, JPG, CUR y GIF
Cuando se da el caso de usar cursores personalizados es conveniente añadir también un cursor estándar, de esa forma en caso de no poder mostrarse el cursor personalizado se mostrará el estándar.
cursor: url(url-imagen),pointer;
No debemos olvidar que la finalidad de los cursores es informar al usuario de lo que se encuentra detrás de ese elemento que estamos señalando y cada uno tiene un significado que todos conocemos,las visitas agradecerán una información clara no les hagamos jugar a las adivinanzas.
| auto | Pasa el cursor |
| crosshair | Pasa el cursor |
| default | Pasa el cursor |
| pointer | Pasa el cursor |
| move | Pasa el cursor |
| e-resize | Pasa el cursor |
| ne-resize | Pasa el cursor |
| nw-resize | Pasa el cursor |
| n-resize | Pasa el cursor |
| se-resize | Pasa el cursor |
| sw-resize | Pasa el cursor |
| w-resize | Pasa el cursor |
| s-resize | Pasa el cursor |
| text | Pasa el cursor |
| wait | Pasa el cursor |
| progress | Pasa el cursor |
| help | Pasa el cursor |
Menú vertical Accordion de jQuery |
|
| ▼ |
.jpg)
Añadir un menú no es tarea sencilla no lo digo porque sea complicado sino por la tarea de escoger el menú adecuado o que más se adapte a nuestras necesidades y gustos.
Este menú resulta vistoso y da mucho juego, requiere utilizar un alojamiento externo para los script pero no es tarea difícil hacerlo.
Descargamos el archivo ddaccordion.js "Y lo alojamos en el servidor que solemos usar"
Nos ubicamos justo antes de </head> y añadimos:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src='aqui-url-archivo-ddaccordion.js' type='text/javascript'/>
En aqui-url-archivo-ddaccordion.js lo sustituimos por la url de nuestro archivo.
A continuación copiamos el contenido de este archivo y lo pegamos justo después de los scripts.
Por último y justo después añadimos los estilos [+/-]
<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 215px; /*ancho del menú*/
border: 1px solid #9A9A9A; /*color de borde*/
}
.applemenu div.silverheader a{ /*títulos-barras del menú*/
background: black url(aquí-url-imagen-gris) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: #FFF; /*color títulos barras gris*/
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(aquí-url-imagen-azul);
color: #FFF;/*color texto barra azul*/
}
.applemenu div.submenu{ /*contenido del menú- altura*/
background-color:#F4F4F4;;/*color de fondo*/
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
</style>
Estas son las imágenes del menú que podemos sustituir por otras o utilizarlas.
<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 215px; /*ancho del menú*/
border: 1px solid #9A9A9A; /*color de borde*/
}
.applemenu div.silverheader a{ /*títulos-barras del menú*/
background: black url(aquí-url-imagen-gris) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: #FFF; /*color títulos barras gris*/
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(aquí-url-imagen-azul);
color: #FFF;/*color texto barra azul*/
}
.applemenu div.submenu{ /*contenido del menú- altura*/
background-color:#F4F4F4;;/*color de fondo*/
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
</style>
Estas son las imágenes del menú que podemos sustituir por otras o utilizarlas.En cualquier entrada de Blogger podemos subirlas para conseguir la url que añadimos donde dice aquí-url-imagen-azul y aquí-url-imagen-gris
Guardamos los cambios y nos dirigimos a plantilla de diseño donde añadiéremos un nuevo gadget escogiendo la pestaña HTML/Javascript
En su interior añadimos lo que mostráremos en el menú, enlaces, imágenes o cualquier contenido [+/-]
<div class="applemenu">
<div class="silverheader"><a href="Url-Enlace">Título 1 y enlace</a></div>
<div class="submenu">
Primer contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 2 y enlace</a></div>
<div class="submenu">
Segundo contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 3 ó enlace</a></div>
<div class="submenu">
Tercer contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 4 y enlace</a></div>
<div class="submenu">
Cuarto contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 5 y enlace</a></div>
<div class="submenu">
Quinto contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 6 y enlace</a></div>
<div class="submenu">
Sexto contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 7 y enlace</a></div>
<div class="submenu">
Séptimo contenido<br/>
<br/>
</div></div>
He añadido color en las partes que podemos modificar y texto para localizarlas.
Una observación, cada barra del menú puede usarse a la vez de enlace.
<div class="applemenu">
<div class="silverheader"><a href="Url-Enlace">Título 1 y enlace</a></div>
<div class="submenu">
Primer contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 2 y enlace</a></div>
<div class="submenu">
Segundo contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 3 ó enlace</a></div>
<div class="submenu">
Tercer contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 4 y enlace</a></div>
<div class="submenu">
Cuarto contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 5 y enlace</a></div>
<div class="submenu">
Quinto contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 6 y enlace</a></div>
<div class="submenu">
Sexto contenido<br/>
</div>
<div class="silverheader"><a href="Url-Enlace">Título 7 y enlace</a></div>
<div class="submenu">
Séptimo contenido<br/>
<br/>
</div></div>
He añadido color en las partes que podemos modificar y texto para localizarlas.
Una observación, cada barra del menú puede usarse a la vez de enlace.
» Visto en : Dynamic Drive donde podéis ver el original.
Al loro con el loro |
|
| ▼ |
Transparencias l l |
|
| ▼ |
Hace algún tiempo me quitaba una espinita que tenía clavada, era sobre el tema "Transparencias" y sobre ese tema tenía una entrada pendiente que Sidhe and Darky me recordaba el otro día.
Se trataba de añadir transparencia a todo el contenido del blog en lugar de hacerlo en main y sidebar como en la otra ocasión.
La cuestión es simple si antes añadíamos dos columnas de transparencia ahora lo haríamos con una.
Lo primero de todo es añadir una imagen de fondo, en Edición de HTML localizamos body { y añadimos la imagen de esta forma: background:url('url-imgen');
El resultado sería algo así:
Vamos a cubrir main y sidebar con la misma transparencia y nos vamos a situar justo antes de ]]></b:skin> para añadir lo siguiente:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background:#0873dd; /* color de la transparencia */
opacity: 0.25; /* aumentar-disminuir transparencia */
-moz-opacity: 0.25; /* aumentar-disminuir transparencia */
filter:alpha(opacity=25); /* For IE6&7 */ /* aumentar-disminuir transparencia */
}
.container {
position: relative;
float: left;
}
.content {
position: relative; /* Fixes the z-index */
float: left;
}
#column-1 { /* ampliar transparencia */
width: 780px;
}
#column-1 .content { /* contenido de la transparencia */
padding: 20px;
width: 800px;
}
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay {
height:expression(document.getElementById("column1").offsetHeight); }
* html #column-1 .overlay {
height:expression(document.getElementById("column1").offsetHeight); }
* html #column-2 .overlay {
height:expression(document.getElementById("column2").offsetHeight); }
height:expression(document.getElementById("column2").offsetHeight); }
A continuación nos situamos en <div id='header-wrapper'> justo antes añadimos:
<div class='container' id='column-1'>
<div class='overlay'/>
<div class='content'>
Por último nos vamos al final de la plantilla y justo antes de </body> añadimos:
</div>
</div>
Con eso lo que hicimos fue crear un bloque desde el header hasta el final de body ese bloque será el que contiene la transparencia y el color que añadiremos.
Si miráis en vista previa seguramente estará todo deformado eso es porque no coinciden las medidas y hay que modificarlas porque como es lógico todas las plantillas no son iguales.
La que puse para el ejemplo tiene width:800px; en outer-wrapper.
Lo que haremos será mirar nuestra plantilla y la misma medida que tiene en outer-wrapper añadirla en #column-1 .content { ¿por qué? porque es el total del contenido, si añadiéramos más empujaría el contenido de nuestra sidebar y se desplazaría hasta perderse. Si añadimos menos no le dejamos espacio y la desplazaría hasta abajo. De todas formas no hay números exactos podéis probar y mirar en vista previa el resultado.
En #column-1 { hay de width: 780px; su trabajo es extender la transparencia hasta cubrir el contendido de main y sidebar lo calculamos considerando la suma de main-wrapper y sidebar-wrapper incrementando por ejemplo 80 para los extremos.
Un ejemplo sería:
main-wrapper:width:410px + sidebar-wrapper:width:220 + 80px = column-1:width: 710px;
Cellar Heat para Blogger |
|
| ▼ |
Las plantillas estilo Magazine han entrado con fuerza en mi opinión es una plantilla que por su diseño no queda bien en cualquier blog la veo indicada en sitios cuya temática sean noticias, ventas, publicidad, descargas... en un blog personal por ejemplo encuentro que le resta personalidad. Es cuestión de gustos...
No hace mucho J.Miur nos mostraba un completo tutorial para entender el funcionamiento de estas plantillas, en "Jugando con los post Magazine" nos enseñaba como acceder a algunos datos y manejarlos de forma clara y con ejemplos 1 - 2 - 3 - 4
Simultáneamente Pizcos nos deleitaba con nuevos cambios añadiendo a su blog un estilo actual y completamente distinto al que nos tenía habituados. No faltaron las explicaciones para que todos nos pongamos manos a la obra.
Plantilla Minima-Magazine
Plantilla Minima Fotoblog
Post Resumidos - 2- 3 - 4 - 5
Si no tienes tiempo o sencillamente prefieres ir por la vía rápida también puedes disponer de una plantilla Magazine en este caso hay dos temas muy elegantes disponibles para Blogger.
Cellar Heat es un tema de WordPress creado por Evan Eckard diseñado para Smashing Magazine y ahora la podemos disfrutar en Blogger gracias a MagzNetwork.
En MagzNetwork podemos realizar la descarga del archivo así como seguir las instrucciones para la instalación.
Cellar Heat Premium
Cellar Heat Gallery
Cellar Heat Light
Cellar Heat Ligth Gallery
Menú circular |
|
| ▼ |
- HOME
texto de home - CHAT
texto para chat - EMAIL
texto para e-mail - DESCARGAS
texto descargas - MÚSICA
texto para música - SEARCH
texto para buscador - VÍDEOS
texto para vídeos - FOTOS
texto para fotos
Está compuesto por una imagen de fondo y los iconos correspondientes, un texto con efecto mouse over que nos muestra una breve explicación de cada icono.
No es difícil crearlo pero si requiere un poco de atención y paciencia.
La forma de crearlo es la siguiente. Nos situamos "Plantilla de diseño" y creamos un nuevo elemento de página o gadget, escogemos la pestaña de HTML/Javascript y en su interior añadimos lo siguiente:
<ul id="circularMenu">
<li class="home"><a href="#"><b>HOME<br /><span>texto de home</span></b></a></li>
<li class="chat"><a href="#"><b>CHAT<br /><span>texto para chat</span></b></a></li>
<li class="email"><a href="#"><b>EMAIL<br/><span>texto para e-mail</span></b></a></li>
<li class="descargas"><a href="#"><b>DESCARGAS<br/><span>texto descargas</span></b></a></li>
<li class="música"><a href="#"><b>MÚSICA<br/><span>texto para música</span></b></a></li>
<li class="search"><a href="#"><b>SEARCH<br/><span>texto para buscador</span></b></a></li>
<li class="vídeos"><a href="#"><b>VÍDEOS<br /><span>texto para vídeos</span></b></a></li>
<li class="fotos"><a href="#"><b>FOTOS<br/><span>texto para fotos</span></b></a></li>
</ul>
Guardamos los cambios y nos vamos a plantilla "Edición de HTML" allí localizamos ]]></b:skin> y justo antes añadimos:
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79Cink1PdzcciHgZyECZNuvNFz4UbpdplyxWwJhPeaHyOwgBmNW5bV0eLY_M-X0-Xn3nuJ6imZTUkEraWWWU95crFC5s79V6FNjyG9aZ4xKG1oPfdTvI6D0-15Oj0Luzv9fo0/s0/backgroundcircular.gif) no-repeat;}
#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgSH-kMHbYj-uU3CF0HkREZb6FiegpmwTcZW38Z5HkWpG1SZlp1YPGu0y8DhnGtnRAs867glS07FyzLTmcGJtS0jlb7dfSlO9QCosDrXoGkGRkO0FmODjitlywdCxfvlSzv0-E/s320/120.png) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6AXHC9xwOoR2jitFrQTmwTBiKwzPYtM-uqAfx22_APP-OCJO_nHx38CTeWoNxzOQxup6PPu0CFR09cxj0vHNu3HRbvloXc52waiJJkArbThdAFmeaO0vgRrmtMz9yuv5i2qAK/s320/54.png) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyGRXcOjPFQ7JRiBvKWfKRtn5kFO3qYWxOpaa1uqGOKRQl0UI4XTt-Esj2eOYd3Pv6GWLpt5RyehEkAC_jQ0lKUjWfDvfANC5saYpGneTv-sj7sjWBbBLMlqKAJTQ017c-hep1/s320/74.png) no-repeat center center;}
#circularMenu li.descargas {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9G5LNp9qEosUsoDqxBLMFZ7Jmq_Z-QfY0MfA8BzluEr-HO6Yc62S9r4Ju8eCah55yChOe_lXtY4bO3sWkwC1D4qRSjS8XJSO2pn8tOKYPvkv7_9W-z42IqBLQQoll7EVdrA1/s320/121.png) no-repeat center center;}
#circularMenu li.música {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivGqoKI2zEz8PwwtV6hknRM2n_lfNx5qQlqDo2JUeCHuKdPjFwgGuz__vHyQr9EZFpW5KxCRbQb7a_oArpGdykB4LqzA0sU8QZ0IPo8NUrOJO2K_3pE-KNNTeITCFPo4Wf9J5F/s320/110.png) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGNmnt_ClP9xKuzLiUIPCbq-8ysWt_-K7IvFv8kYhnrAvU2vfsv-Y7Aoa5z_O5lgdXUQAoqSYo2nrcmevo4PSGmkiaq1b23feMmg-Dl0tq2ax4FpSSVZlP5KoDewicr8zoeLk/s320/16.png) no-repeat center center;}
#circularMenu li.vídeos {left:5px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA0sphvVRUs5om1cUfi8BhBBbq9eRs_accTZLZ6xSMlCpXFqo4EJZCx-zwbAnZabJZpDvTLDOy4FoKS7NiayjFfywFHj2FJgUmq1LGG-WiBxkwW0niwowgVWVzyXsBX92eZWdk/s320/18.png) no-repeat center center;}
#circularMenu li.fotos {left:120px; top:225px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QnARv-DhgbYTTSZ7K51GD6mnPHZ15qTpp4a6kIwJ2NEKeG7iDGlw-jP31k-tfpWukLk4HFr9xA-u539iM9W0AAg8ugvvVZO8Mp-unXSGp_q5lf5iID86aTj3OT1ThmvG4A_t/s320/125.png) no-repeat center center;}
#circularMenu li a b {display:none;}
#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}
#circularMenu li a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2oKGYKxSZ7sQwdLq4X0sQB3qaVWZPzp5XgYpcIwWGQ2CVhlGVnHArtWCwMwBuF2xwRtSxzA5QIMBrZYfDLmxc3mPVD118_A2OeInM199VSaBFfbjqCLL38srIVMONKPsz00El/s320/circle.gif); text-decoration:none; font-family:georgia, serif;}
#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}
#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}
#circularMenu li.home a:hover b {left:-22px; top:100px;}
#circularMenu li.chat a:hover b {left:-102px; top:64px;}
#circularMenu li.descargas a:hover b {left:63px; top:64px;}
#circularMenu li.email a:hover b {left:-132px; top:-11px;}
#circularMenu li.vídeos a:hover b {left:93px; top:-11px;}
#circularMenu li.fotos a:hover b {left:-22px; top:-121px;}
#circularMenu li.search a:hover b {left:63px; top:-87px;}
#circularMenu li.música a:hover b {left:-102px; top:-87px;}
Ya podemos guardar los cambios y vamos a entender un poco en qué consiste para poder personalizarlo.
La primera parte contiene la imagen de fondo del menú:
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79Cink1PdzcciHgZyECZNuvNFz4UbpdplyxWwJhPeaHyOwgBmNW5bV0eLY_M-X0-Xn3nuJ6imZTUkEraWWWU95crFC5s79V6FNjyG9aZ4xKG1oPfdTvI6D0-15Oj0Luzv9fo0/s0/backgroundcircular.gif) no-repeat;}
La segunda imagen es el círculo que rodea los iconos cuando pasamos el ratón sobre la imagen:
#circularMenu li a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2oKGYKxSZ7sQwdLq4X0sQB3qaVWZPzp5XgYpcIwWGQ2CVhlGVnHArtWCwMwBuF2xwRtSxzA5QIMBrZYfDLmxc3mPVD118_A2OeInM199VSaBFfbjqCLL38srIVMONKPsz00El/s320/circle.gif); text-decoration:none; font-family:georgia, serif;}
Como es lógico podemos tener otra idea respecto a iconos o enlaces que deseamos añadir así que en este mismo código de la plantilla vamos a sustituir los iconos por los nuestros..
Cada icono está representado con un color, donde dice por ejemplo música lo sustituimos por el nombre que añadiremos a ese tema en particular.
También vamos a sustituir la url de la imagen por la nuestra poniendo especial atención que cada url de la imagen esté relacionada con el nombre del tema:
#circularMenu li.música {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivGqoKI2zEz8PwwtV6hknRM2n_lfNx5qQlqDo2JUeCHuKdPjFwgGuz__vHyQr9EZFpW5KxCRbQb7a_oArpGdykB4LqzA0sU8QZ0IPo8NUrOJO2K_3pE-KNNTeITCFPo4Wf9J5F/s320/110.png) no-repeat center center;}
Cada vez que sustituimos una imagen y añadimos el nombre iremos al código que hay más abajo :
#circularMenu li.música a:hover b {left:-102px; top:-87px;}
Ahí también debemos añadir el nombre de nuestro tema, por ejemplo si sustituimos el icono de música por uno de "enlaces" sustituimos el texto de "música" por "enlaces"
#circularMenu li.enlaces a:hover b {left:-102px; top:-87px;}
Una vez terminamos con todos guardamos los cambios y nos dirigimos al elemento de página que añadimos en HTML.. allí las modificaciones serán las siguientes.
Cada línea está relacionada con el código de la plantilla por ejemplo en:
<li class="home"><a href="#url"><b>HOME<br /><span>texto de home</span></b></a></li>
En HOME tenemos el icono que añadimos en nuestra plantilla, le adjudicamos una clase que es el nombre "class="home" esa clase será la que otorgue la imagen y el efecto al pasar el ratón sobre el icono, ese es el motivo por el que deben coincidir los dos nombres de lo contrario no causaría efecto.
Para crear un enlace sustituimos el asterisco # por la url de la página que vamos a enlazar.
En "HOME" es el texto de mayor tamaño.
Donde "texto de home" es el texto de menor tamaño que muestra una breve descripción.
» Menú de CSSplay
» Iconos Milky de iconeden
Mi wallpaper |
|
| ▼ |
Por aquí sigo intentando poner a salvo mis archivos por si tuviera que formatear el PC, los problemas siguen siendo los mismos que ayer ¿han pensado alguna vez la de veces que utilizamos copiar y pegar? es un gran inconveniente porque limita a la hora de añadir cualquier código por muy insignificante que sea.
Es una sensación extraña hablar y hablar cosas sin transcendencia, es como si me asomara a una ventana y os viera jugar en el patio sin poder unirme al grupo.
¡Eh! ¿no bajas a jugar?
(Gritando porque estoy lejos) Nooooooooooo estoy enfermaaaaa ¡¡tengo el virus de la imprudencia!!
Que suerte eh, ahí escribiendo lo que queréis, arreglando vuestras entradas con imágenes y bordes, efectos y enredo de códigos por allí y por allá. Ya me desquitaré ya...
Bueno, una vez dije las tres bobadas del día os dejo algo para que lo veáis, yo soy un poco especial rara en gustos...
Es mi actual wallpaper, no me pregunten el autor ni la página porque lo guardé hace tiempo y hoy volví a encontrarlo. Lo añadí como fondo de pantalla y ahora entiendo por qué lo había guardado...¡Es precioso!
¿No? pues a mi me gusta.
Toda precaución es poca. |
|
| ▼ |
Desde hace unas semanas vengo recibiendo correos que a simple vista me parecían sospechosos, recordaba uno de los consejos que SpamLoco nos había dado, comprobar si el enlace que contienen los correos era en realidad la dirección que decía ser.
Normalmente nos piden acceder a una dirección pues bien, si ponemos el ratón sobre ese enlace en el escritorio nos aparece la url verdadera, la dirección real del enlace.
Yo siempre evito abrir correos desconocidos, esos que nos avisan de un maravilloso vieje o como estos últimos que nos informan que debemos confirmar nuestros datos en cualquier banco.
El de hoy era diferente, en asunto decía "Esto es un mensaje de móvil porque me he quedado si Internet" y añadía una numeración. Nunca he recibido correos enviados con el móvil, pero pensé que podía ser de alguien conocido además con no acceder a ningún enlace no había problema.
Pues si que lo hay, a partir de ese momento el PC se bloqueaba, intenté utilizar algunos programas y resulta que ya no estaban, al instalarlos de nuevo el problema seguía siendo el mismo como si no estuvieran.
Y más cosas... cuando accedo a algún icono de mi pantalla ya no aparece el icono en la barra de tareas, si quiero cambiar de pantalla debo minimizar y tener todas las ventanas a la vista para no perderlas.
Tampoco puedo copiar y pegar nada, tengo la opción de marcar pero de pegar nada de nada.
No sé si hay algo más que aún no he visto, ni si voy a poder solucionarlo pero una cosa si sé, que si antes ponía especial cuidado en no abrir correos extraños ahora sin mirarlos irán a la papelera directamente.
Tened cuidado y por favor no enviéis correos en cadena eso nos afecta a todos.
Easy Slider » Efecto deslizante |
|
| ▼ |
Alen Grakalic es el autor de Easy Slider un plugin de jQuery que nos permite deslizar vertical y horizontalmente cualquier contenido.
Estilo horizontal deslizante imagen
Estilo vertical deslizante imagen
Estilo vertical contenido deslizante
Podemos añadir este efecto en tres pasos, el primero es alojar los archivos .js para conseguir la url que más tarde añadiremos a los script en la plantilla.
Descargar el zip con los archivos.
El zip contiene dos carpetas, usaremos solo la carpeta .js
Extraemos el archivo easySlider y jquery.
Una vez los tenemos alojados nos situamos justo antes de </head> añadimos los scripts:
<script type="text/javascript" src="Url-del-archivo-jquery.js"></script>
<script type="text/javascript" src="Url-del-archivo- easySlider.js"></script>
Donde dice "Url-del-archivo-jquery.js" es el lugar donde añadimos la url del nuestro archivo jquery.js que alojamos en nuestro servidor.
En "Url-del-archivo-easySlider.js" repetimos la operación y añadimos la url de nuestro archivo easySlider.js
Si deseamos la orientación horizontal añadimos a continuación:
<script type='text/javascript'>
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
Si por el contrario deseamos la orientación vertical añadimos:
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
orientation:'vertical'
});
});
</script>
Ahora vamos antes de ]]></b:skin> y añadimos los estilos:
/* Easy Slider */
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:580px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */
En width podemos modificar la anchura y con height la altura.
Si deseamos añadir unos estilos al texto de navegación lo podemos hacer añadiendo unas líneas de código:
#prevId{
background:#000;
border:1px solid #eee;
color:#fff;
font-size:16px;
}
#nextBtn{
background:#000;
border:1px solid #eee;
color:#fff;
font-size:16px;
}
Guardamos los cambios y en "Plantilla de Diseño" añadimos un elemento de página o gadget escogiendo HTML...y pegamos en su interior:
<div id="slider">
<ul>
<li><a href="#"><img src="url-imagen-1-"/></a></li>
<li><a href="#"><img src="url-imagen-2-"/></a></li>
<li><a href="#"><img src="url-imagen-3-"/></a></li>
<li><a href="#"><img src="url-imagen-4-"/></a></li>
<li><a href="#"><img src="url-imagen-5-"/></a></li>
</ul>
</div>
El resultado de seguir estos pasos es este ejemplo "Easy Slider » Efecto deslizante vertical"
» Visto en Xyberneticos
Color y número en los comentarios con jQuery |
|
| ▼ |
Personalizar los comentarios siempre ha sido algo que antes o después todos hacemos, con jQuery podemos añadir color a los comentarios en dos sencillos pasos.
La idea la vi en The Technology Hub y la forma de hacerlo es la siguiente:
Justo antes de </head> añadimos:
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
El siguiente paso es añadir el script que contiene el color de fondo justo antes de </body> ya sabéis, al final de la plantilla.
<script type="text/javascript">
$(document).ready(function() {
$("#comments-block dt").each(function(i){
var divId='zpk' + i.toString();
$(this).before("<div id='" + divId + "'></div>");
$(this).next().next().prependTo("#" + divId);
$(this).next().prependTo("#" + divId);
$(this).prependTo("#" + divId);
$("#" + divId).css("padding","10px");
if(i%2==0){
$("#" + divId).css("background-color","#B8D62F");
}else{
$("#" + divId).css("background-color","#DFF294");
}
});
});
</script>
En background-color podemos sustituir los colores.
También con jQuery podemos añadir el número de orden en los comentarios, bastaría con incluir justo antes de </head> lo siguiente.
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>
(Si incluimos el anterior script para añadir color no es necesario volver a añadirlo)
También añadimos antes de </head>
<script type="text/javascript">
$(document).ready(function() {
$("#comments-block").find("dt").each(function(i){
$(this).prepend("<span style='color:red;margin-right:2px;"
+ "padding:2px;background-color:silver'>"
+ (i+1).toString() + ".</span>" );
});
});
</script>
En color:red tenemos el color del número.
Con background-color:silver añadimos color al fondo del número, si no deseamos color de fondo bastará con suprimir esa parte.
Wallpapers Get |
|
| ▼ |
Configurar enlaces » Efecto hover con CSS |
|
| ▼ |
Sabemos que el efecto hover produce un cambio al pasar el ratón sobre un elemento, el que vemos con más frecuencia es el efecto hover en enlaces. Subrayados, letra en negrita, iconos, texto adicional, cambio de color y un largo ect...
En general los enlaces de la plantilla los tenemos definidos en body { más o menos así:
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
Al utilizar la opción de fuentes y colores automáticamente los colores quedan configurados sin necesidad de modificar la plantilla, si queremos añadir un color distinto al de la paleta que proporciona Blogger es necesario hacerlo manualmente.
Para ello hay que tener en cuenta lo siguiente:
» a:link "tal y como lo vemos"
» a:visited "enlace visitado"
» a:active "cuando se está pulsando"
» a:hover "con el cursor encima"
Cambiar de color es tan sencillo como sustituir por ejemplo color:$linkcolor; por color:#940f04;
Para conseguir el efecto hover es necesario añadir los estilos donde deseamos que se produzca el efecto.
Por ejemplo al pasar el ratón sobre el enlace vamos a añadir letra en negrita, pero antes eliminamos " text-decoration:underline;" ese estilo nos añade un subrayado.
a:hover {
color:$titlecolor;
font-weight:bold;
}
Para añadir color de fondo añadimos:
a:hover {
color:$titlecolor;
background:#940f04;
}
Normalmente los enlaces de una página guardan cierta similitud, sin embargo hay excepciones y añadimos un efecto discreto en las entradas y otros más vistosos en la sidebar.
Para ejemplos vistosos encontré algunos que me gustaron mucho.
Gem@ BLOG
Añadimos en CSS antes de ]]></b:skin> los estilos.
abbr[title]:after{
/*Workaround for Gecko*/
content: "";
}
abbr[title]:hover:after{
/*Shows the value of the title attribute when hovered*/
content: " (" attr(title) ")";
}
En HTML (en cualquier lugar donde deseamos añadir el efecto)
<abbr title="mensaje-de-texto">texto-visible</abbr>
Probando y jugando
También en CSS antes de ]]></b:skin>
strong:after,
#n2 strong:before{
/*Workaround for Gecko*/
content: "";
}
strong:hover:after{
content: "\00BB"
}
strong:hover:before{
content: "\00AB"
}
En HTML (en cualquier lugar donde deseamos añadir el efecto)
<strong>Probando y jugando</strong>
Es cuestión de gustos, de ideas y de ganas de jugar.
MLIpsum generador de texto |
|
| ▼ |
Este tipo de páginas están indicadas para los diseñadores Web pero puede ser muy útil en cualquier momento aún sin ser diseñador. Con un sencillo copiar pegar conseguimos añadir a nuestro blog listas, tablas, párrafos....
¡¡ El ganador es................ .!! |
|
| ▼ |
Ha finalizado el concurso sobre decoración navideña organizado por Pizcos Blog.
El jurado escogido por el organizador y compuesto por Graciela, Paqui, Perem, k_nelita y una servidora tuvimos que escoger según las normas diez blogs y eso no ha sido tarea fácil.
De la suma de esa puntuación contabilizada por los notarios del concurso J.Miur y Rosa el resultado es el siguiente...
El primer puesto es para....
Más detalles sobre los premios en el blog de Pizcos.
A todos los participantes, jurado, notarios y Pizcos agradezco estos días tan agradables donde he podido conoceros un poco más. Felicitaciones al ganador y a todos en general.
DINPATTERN » patterns o patrones |
|
| ▼ |
DINPATTERN es una página con un contenido extraordinario donde encontraremos un gran surtido de patterns o patrones para utilizar como fondo del blog.
Podemos ver el efecto de los patterns como fondo haciendo click en "preview" y en "details" descargar el archivo en formato zip.
